<template>
  <view class="container">
    <view class="container-body">
      <view class="container-body__content">
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item__left">
              <!--  头像区域 -->
              <view class="container-body__content-info-item__left-avatar">
                <image :src="defaultAvatar" mode="aspectFill"
                       style="width: 100rpx; height: 100rpx; border-radius: 50%;"/>
              </view>
              <view class="container-body__content-info-item__left-name">
                <text>{{ orderInfo.personName || '维修人员' }}</text>
              </view>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>工单编号:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.workOrderId }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>预约项目:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ maintenanceItems }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="container-body__content">
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text style="font-size: 28rpx;color: red;">*</text>
              <text>满意度评价</text>
            </view>
          </view>
          <view class="container-body__content-info-item" v-for="(item,index) in rateList" :key="index"
                style="justify-content: flex-start">
            <view class="container-body__content-info-item-label">
              <text>{{ item.label }}:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <view class="container-body__content-info-item-value__rate">
                <u-rate :count="5" active-color="#F59A23" v-model="item.value" size="40rpx"
                        @change="rateChange(item, $event)"></u-rate>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="container-body__content">
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label" style="flex: 1;width: 100%;">
              <text>评价内容:</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-value" style="flex: 1;width: 100%;">
              <u-textarea v-model="form.evaluateContent" placeholder="说说您对服务的评价" clearable maxlength="200"
                          count></u-textarea>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-value" style="flex: 1;width: 100%;">
              <image-upload v-model="form.evaluateImg" :max-count="6" :is-show-tip="true">
                <template slot="tip">
                  <text class="container-body__content-info-item-value__tips">* 仅支持图片格式（例如：jpg、png、jpeg等），最多上传6张每张最大5M
                  </text>
                </template>
              </image-upload>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="container-footer">
      <view class="container-footer__btn">
        <u-button type="primary" @click.stop="submit">提交</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {evaluateWorkOrder, getWorkOrderDetail} from "@/api/manager/workOrder";

export default {
  data() {
    return {
      // 工单id
      workOrderId: '',
      // 工单详情
      orderInfo: {},
      //评分列表
      rateList: [
        {label: '总体评价', value: null, key: 'totalityScore'},
        {label: '相应速度', value: null, key: 'respondScore'},
        {label: '服务态度', value: null, key: 'serveScore'},
        {label: '处理结果', value: null, key: 'resultScore'},
      ],
      form: {
        workOrderId: "", //工单id
        totalityScore: null, //总体评价
        respondScore: null, //响应速度
        serveScore: null, //服务态度
        resultScore: null, //处理结果
        evaluateContent: "", //评价内容
        evaluateImg: "" //图片
      },
      // 默认头像
      defaultAvatar: require('@/static/logo.png'),

    };
  },
  computed: {
    // 维修项目
    maintenanceItems() {
      let list = this.orderInfo.workOrderChargeItemList ? this.orderInfo.workOrderChargeItemList.map(item => item.itemName) : []
      return list.join(' | ')
    }
  },
  onLoad(options) {
    this.workOrderId = options.workOrderId
    this.init()
  },
  methods: {
    init() {
      // 获取工单详情
      this.getWorkOrderDetail();
      this.reset()
    },
    // 重置表单
    reset() {
      this.form = {
        workOrderId: this.workOrderId,
        totalityScore: null, //总体评价
        respondScore: null, //响应速度
        serveScore: null, //服务态度
        resultScore: null, //处理结果
        evaluateContent: "", //评价内容
        evaluateImg: "" //图片
      }
    },
    // 获取工单详情
    getWorkOrderDetail() {
      if (!this.workOrderId) {
        return
      }
      getWorkOrderDetail(this.workOrderId).then(res => {
        if (res.code === 200) {
          this.orderInfo = res.data;
        }
      })
    },
    // 评分回调
    rateChange(data, value) {
      console.log(data, value)
      this.form[data.key] = value
    },
    //提交评价
    submit() {
      console.log(this.form)
      // 校验评分
      let flag = true
      this.rateList.forEach(item => {
        if (item.value === null) {
          flag = false
          return false
        }
      })
      if (!flag) {
        this.$modal.showToast('请完善评分后提交')
        return
      }
      // 评价
      evaluateWorkOrder(this.form).then(res => {
        if (res.code === 200) {
          this.$modal.showToast(res.msg || '评价成功~')
          setTimeout(() => {
            this.back()
          }, 1000)
        } else {
          this.$modal.showToast(res.msg || '评价失败~')
        }
      })
    },
    // 返回上一页
    back() {
      // 判断当前页面是否有上一页
      let pages = getCurrentPages()
      if (pages.length > 1) {
        // 页面栈中有上一页，则返回上一页
        this.$tab.navigateBack()
      } else {
        this.$tab.redirectTo('/pages/manager/workOrder/maintenance/list')
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;

  .container-body {
    margin-bottom: 160rpx;

    &__content {
      margin-top: 20rpx;
      background-color: #fff;
      padding: 20rpx;

      &-info {

        &-item {
          margin-bottom: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &-label {
            font-size: 28rpx;
            color: #2B2B2B;
            width: 160rpx;
          }

          &-value {
            font-size: 28rpx;
            color: #2B2B2B;
            margin-left: 20rpx;

            &__tips {
              font-size: 28rpx;
              color: #AAAAAA;
              margin-top: 10rpx;
            }
          }

          &__photo {
            display: flex;
            justify-content: space-between;
            flew-wrap: wrap;
            //margin-top: 10rpx;
            &-item {
              margin-right: 10rpx;

              &:last-child {
                margin-right: 0;
              }
            }
          }

          &__left {
            display: flex;
            align-items: center;

            &-avatar {

            }

            &-name {
              margin-left: 20rpx;
              font-size: 30rpx;
              color: #2B2B2B;
            }
          }

          &__right {
            .phone-icon {
              border-radius: 50%;
              border: 1rpx solid #02A7F0;
              width: 60rpx;
              height: 60rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .container-body__content-info-item__table {
            flex: 1;

            &__header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20rpx;
              margin-bottom: 20rpx;
              background-color: #F0F1F5;
              padding: 20rpx 0;
              border: 1rpx solid #EBEBEB;

              &-item {
                flex: 1;
                text-align: center;
                font-size: 28rpx;
                color: #2B2B2B;
              }
            }

            &__content {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20rpx;
              margin-bottom: 20rpx;
              border-bottom: 1px solid #EBEBEB;

              &-item {
                flex: 1;
                text-align: center;
                font-size: 28rpx;
                color: #2B2B2B;
              }
            }
          }
        }

        .container-body__content-info__footer {
          &-text {
            font-size: 28rpx;
            text-align: right;
            margin-bottom: 20rpx;
          }
        }

        .tip-text {
          text-align: right;
          font-size: 28rpx;
          color: #AAAAAA;
        }
      }
    }
  }

  .container-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 30rpx 20rpx;
    display: flex;
    justify-content: space-between;

    &__btn {
      width: 100%;
      border-radius: 10rpx;
      border: 1rpx solid #ccc;

      &:last-child {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
